<template>
    <div class="my-pagination">
        <el-pagination v-model:current-page="currentPage" :page-size="pageSize * 1" :small="small" :disabled="disabled"
            :background="background" layout="prev, pager, next" :total="total * 1" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" :pager-count="5">
        </el-pagination>
        <div class="totals">{{ '共' }} <span class="total">{{ Math.ceil(total / pageSize) }}</span> {{ '页' }}</div>
    </div>
</template>

<script>
export default {
    props: {
        total: {
            type: [String, Number],
            default: 1000
        },
        pageSize: {
            type: [String, Number],
            default: 5
        },
        page: {
            type: [String, Number],
            default: 1
        }

    },
    data() {
        return {
            currentPage: 1,
            small: false,
            disabled: false,
            background: false
        }
    },
    methods: {
        handleSizeChange() {

        },
        handleCurrentChange(e) {
            this.$emit('message', e)
        },

    },
    watch: {
        page(newVal, oldVal) {
            this.currentPage = newVal
        }
    }
}
</script>

<style lang="less" scoped>
.my-pagination {
    width: 31.97rem;
    height: 1.6rem;
    background: #FDFDFE;
    opacity: 0.5;
    border: 0.05rem solid #FFFFFF;
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.totals {
    font-size: 0.59rem;
    font-family: 'IdeaFonts-DianHei-DEJ', 'IdeaFonts-DianHei';
    font-weight: normal;
    color: #68656C;
    line-height: 0.85rem;
    margin-left: 0.85rem;
}

.total {
    font-family: 'SmileySans-Oblique', 'SmileySans';
}

.el-pagination :deep(.number) {
    font-size: 0.59rem;
    font-family: 'SmileySans-Oblique', 'SmileySans';
    font-weight: normal;
    color: #68656C;
    line-height: 0.85rem;
}

.el-pagination :deep(.more) {
    width: 0.56rem;
    height: 0.08rem;
    color: #C5C5CA;
    cursor: url('@/assets/手.png'), auto !important;
}

.el-pagination :deep(.el-pager li) {
    cursor: url('@/assets/手.png'), auto !important;
}

.el-pagination :deep(.el-pager li.is-active) {
    position: relative;
    color: #FFFFFF;
    font-weight: normal;
    z-index: 9;
}

.el-pagination :deep(.el-pager li.is-active::before) {
    content: "";
    position: absolute;
    background: url("@/assets/img/page-bg.png") no-repeat;
    background-size: cover;
    width: 1.87rem;
    height: 1.87rem;
    z-index: -1;
}

.el-pagination :deep(.btn-prev .el-icon svg) {
    display: none;
}

.el-pagination :deep(.btn-prev .el-icon) {
    display: inline-block;
    width: 0.19rem;
    height: 0.21rem;
    background: url("@/assets/img/prev.png") no-repeat;
    background-size: 100% 100%;
}


.el-pagination :deep(.btn-next .el-icon svg) {
    display: none;
}

.el-pagination :deep(.btn-next .el-icon) {
    display: inline-block;
    width: 0.19rem;
    height: 0.21rem;
    background: url("@/assets/img/next.png") no-repeat;
    background-size: 100% 100%;
}
</style>